<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%--<title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script>--%>
        <title>管理登陆</title>
        <script src="${pageContext.request.contextPath}/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
        <script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
        <link href="${pageContext.request.contextPath}/toastr-master/toastr.min.css" rel="stylesheet"/>
        <script src="${pageContext.request.contextPath}/toastr-master/toastr.min.js"></script>
</head>
<style>

    f.layui-input{
        width: 150px;
    }
    .max{
        margin: auto;
        margin-top: 170px;
        width: 400px;
    }
    body {
        background-image: url("/img/timg1.jpg");
        background-size: 100%;
        background-repeat: no-repeat;
    }
</style>
<body>
<%--<div class="layui-row layui-col-space10">
    <div class="layui-col-md9">
        <div class="grid-demo grid-demo-bg1">

        </div>
    </div>
    <div class="layui-col-md3">
        <div class="grid-demo">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
                        <button type="reset" class="layui-btn layui-btn-primary">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>--%>
<div class="layui-form max"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">用户账号</label>
        <div class="layui-input-block">
            <input type="text" name="phone" id="username" lay-verify="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" id="pword" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="sub" class="layui-btn" lay-submit lay-filter="*">登录</button>

            <button id="log" type="reset" class="layui-btn layui-btn-primary">注册</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</div>

<div id="addStaffDiv" style="display: none">
    <form class="layui-form" id="addForm" lay-filter="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label">用户账号</label>
            <div class="layui-input-inline">
                <input type="text"  id="uid" name="phone" class="layui-input" lay-verify="required|userphone">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户密码</label>
            <div class="layui-input-inline">
                <input type="text"  id="password" name="password" class="layui-input" lay-verify="required">
            </div>
        </div>
       <%-- <div class="layui-form-item">
            <label class="layui-form-label">确认新密码</label>
            <div class="layui-input-inline">
                <input type="password" name="newPword" id="newPassword" class="layui-input" lay-verify="required" >
            </div>
        </div>--%>
      <%--  <div class="layui-form-item">
            <label class="layui-form-label">用户姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" class="layui-input" lay-verify="required">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-inline">
                <input type="text" name="cardID" class="layui-input" lay-verify="required|idcard">
                &lt;%&ndash;<input type="text" name="idCard" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input" lay-verify="required">&ndash;%&gt;
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-inline">
                <input type="text" name="address" class="layui-input" lay-verify="required">
            </div>
        </div>--%>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="addBtnStaff">确认注册</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    /*//Demo
    layui.use(['form','jquery'], function(){
        var form = layui.form;
        var $ = layui.jquery;


        //监听提交
        form.on('submit(formDemo)', function(data){
            //layer.msg(JSON.stringify(data.field));
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/user/login',
                dataType:'json',//预期的后台数据类型
                data:{"phone":data.field.phone,"password":data.field.password},//当前表单的所有数据
                success:function (data) {

                }
            })
            return false;
        });
    });*/


    /*表单验证*/
    layui.use('form', function () {
        var form = layui.form;

        form.verify({
            username: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '用户名不能有特殊字符';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线\'_\'';
                }
            },

    /*   idcard: function (value, item) { //value：表单的值、item：表单的DOM对象
            if (!new RegExp(" /(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)/").test(value)) {
                // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 
                return '请输入在正确的身份证号';
            }},*/
            userphone: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$").test(value)) {
                    // 验证11位手机号正则表达式
                    return '请输入正确的手机号';
                }},
            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
             /*pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]*/
        })
        layui.use(['table','layer','form','jquery'], function(){
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;

            $("#sub").click(function (){
                var phone =  $("#username").val();
                var password =  $("#pword").val();
                $.post(
                    "${pageContext.request.contextPath}/user/login",
                    {phone,password},
                    function (bakedata){
                        if (bakedata.code==1002 ){
                            layer.alert("此账号或者密码错误", {icon: 1});
                            //toastr.error('此账号或者密码错误');
                        }else if (bakedata.code==1003){
                            layer.alert("此账号已禁用", {icon: 1});
                        } else{
                            layer.alert("登陆成功", {icon: 1});
                            setTimeout("window.location.href = '${pageContext.request.contextPath}/kehuduan.jsp'",1500);
                            //alert("此账号禁止登录");

                        }
                       /* else{

                            //表示登录成功，本来应该要直接跳转到管理系统首页，现在需要先去查询当前用户对应的权限
                            window.location.href = "kehuduan.jsp";
                        }*/
                    })
            })

            $("#log").click(function () {
                window.location.href = "${pageContext.request.contextPath}/zhuce.jsp";
            })

            //增加的提交按钮
            form.on('submit(addBtnStaff)', function(data){
                $.ajax({
                    type:'get',
                    url:'${pageContext.request.contextPath}/user/addUser',
                    data:data.field,//当前表单的全部的值
                    dataType: 'json',
                    success:function (data){
                        layer.closeAll();
                        if (data.code==1001){
                            alert("注册成功");
                            //toastr.success('注册成功');
                        }else {
                            //toastr.error('注册失败');
                            alert("注册失败");
                        }
                    }
                });
                return false;//阻止表单跳转
            })
        });

    });

</script>
</html>
